<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple">
          <el-button
            type="primary"
            size="small"
            @click="addAgents"
          >添加经纪</el-button>
        </div></el-col>
        <el-col
          :span="12"
          :offset="6"
        ><div class="grid-content bg-purple">
          <el-input v-model="keyword" placeholder="请输入内容" @keyup.enter.native="searchBtn">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchBtn"
            />
          </el-input></div></el-col>
      </el-row>
      <el-table border :data="agentsList" style="margin-top: 20px">
        <el-table-column label="图片" width="120px" align="center">
          <template #default="{ row }">
            <img
              v-fixImg="require('@/assets/common/03.png')"
              :src="row.image"
              alt=""
              class="staffPhoto"
            >
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="writeBtn(row.id)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="small"
              @click="delBtn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pages.size"
          :current-page="pages.page"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <el-dialog
      :title="`${this.formData.id ? '编辑' : '新增'}经纪`"
      :visible="isShowWrite"
      @close="btnCancel"
    >
      <el-form
        ref="addWrite"
        label-width="120px"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="formData.name"
            style="width: 90%"
            placeholder="请输入名称"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="formData.email"
            style="width: 90%"
            placeholder="请输入邮箱"
          />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input
            v-model="formData.phone"
            style="width: 90%"
            placeholder="请输入电话"
          />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
            v-model="formData.address"
            style="width: 90%"
            placeholder="请输入地址"
          />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input
            v-model="formData.desc"
            autosize
            type="textarea"
            :rows="2"
            style="width: 90%"
            placeholder="请输入描述内容"
          />
        </el-form-item>
        <el-form-item label="封面">
          <ImagesUpload ref="imageInfo" @image="image" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addAgents, delAgents, getAgentsList, getDetail, writeAgents, getCount } from '@/api/economics'
export default {
  data() {
    return {
      agentsList: [],
      keyword: '',
      isShowWrite: false,
      agentsId: '',
      pages: {
        page: 1, // 当前页面
        size: 5
      },
      total: 0, // 总数
      limit: 5, // 获取的最大条数
      start: 0, // 开始获取的位置
      formData: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        phone: [
          { required: true, message: '电话号码不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '电话号码格式不正确',
            trigger: 'blur'
          }
        ],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
          //   { validator: onceWorkNumber, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    // Search() {
    //   if (this.keyword) {
    //     return this.agentsList.filter((item) => {
    //       return item.name.includes(this.keyword)
    //     })
    //   }
    // }
  },
  created() {
    this.getAgentsList()
  },
  methods: {
    async getAgentsList() {
      this.total = await getCount()
      // console.log(this.total, 9999)
      this.agentsList = await getAgentsList({
        _limit: this.limit,
        _start: this.start,
        name_contains: this.keyword
      })
    },
    // 分页功能
    changePage(newPage) {
      // 把最新的页面传给当前页面
      this.pages.page = newPage
      this.start = this.limit * (newPage - 1)
      this.getAgentsList()
    },
    async writeBtn(id) {
      // this.agentsId = id
      this.isShowWrite = true
      this.formData = await getDetail(id)
      this.$nextTick(() => {
        this.$refs.imageInfo.fileList = [{ url: this.formData.image }]
      })
      console.log(id, this.formData)
    },
    addAgents() {
      this.isShowWrite = true
    },
    async btnOK() {
      await this.$refs.addWrite.validate()
      if (this.formData.id) {
        // 编辑
        await writeAgents(this.formData)
      } else {
        // 新增
        await addAgents(this.formData)
      }
      this.$message.success('编辑成功')
      this.isShowWrite = false
      this.getAgentsList()
    },
    btnCancel() {
      this.formData = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
      this.$refs.addWrite.resetFields()
      // 清空上传组件的图片
      console.log(this.$refs.imageInfo)
      // 清空子组件的图片
      this.$refs.imageInfo.fileList = []
      this.isShowWrite = false
    },
    async delBtn(id) {
      try {
        await this.$confirm('确定要删除吗?')
        await delAgents(id)
        this.$message.success('删除成功')
        this.start = 0
        this.getAgentsList()
      } catch (error) {
        console.log(error)
      }
    },
    async searchBtn() {
      if (this.keyword) {
        this.pages = {
          page: 1, // 当前页面
          size: 5
        }
        this.start = 0
        this.agentsList = await getAgentsList({
          _limit: this.limit,
          _start: this.start,
          name_contains: this.keyword
        })
        this.total = this.agentsList.length
      } else {
        this.getAgentsList()
      }
    },
    // 子传父的值
    image(val) {
      console.log(152, val)
      this.formData.image = val
      console.log(154, this.formData.image)
    }

    // async searchBtn() {
    //   await getCount({
    //     name_contains:
    //   })
    //   console.log(111)
    // }
  }
}

</script>

<style lang="scss" scoped>
.staffPhoto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}
</style>
